<template>
    <div>
        <a-modal
            title=""
            :footer="false"
            :visible="viewFileVisible"
            :closable="false"
            :confirm-loading="confirmLoading"
            :width="sqsxid?'70%':'100%'"
            @ok="handleOk"
            @cancel="handleCancel"
            :dialog-style="{ margin: '0 auto',}"
            wrapClassName="viewFile-div">
            <div>
                <div class="viewFile-Title">
                    <h1>{{pageData.zdwj.fwjqc}}</h1>
                    <h2>{{pageData.zdwj.fbb}}</h2>
                </div>
                <div class="viewFile-body" >
                    <div v-for="(itema,indexa) in pageData.fg" :key="itema.fgid">
                        <div class="viewFileModal-title">
                            <span>{{ itema.fgmc }}</span>
                        </div>
                        <div v-for="(itemb,indexb) in itema.tk" :key="itemb.id">
                            <h3 :id="itemb.id" class="viewFileModal-content-part">{{ itemb.zjmc }}</h3>
                            <p v-for="(itemc,indexc) in itemb.tkList" :key="itemc.id"
                            style="text-indent:28px;font-size:16px;">
                            <span style="font-weight: bold;">{{ itemc.fzdyzh }}</span>&emsp;{{ itemc.fzdyznr }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div style="position:absolute;top:50px;right:0px;width: 300px;height:100%;">
                <div style="text-align: right">
                    <a-form layout="inline">
                        <!-- <a-form-item>
                            <a-button @click="searchClick" class="blue-btn">搜索</a-button>
                        </a-form-item> -->
                        <a-form-item>
                            <a-button @click="muluClick" :class="isMulu?'blue-btn':''">目录</a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-button @click="handleCancel">关闭手册</a-button>
                        </a-form-item>
                    </a-form>
                </div>
                <div v-if="isSearch" style="height: 100%;background-color: white;">
                    <initFindWinModal ref="initFindWinModalRef"></initFindWinModal>
                </div>
                <div v-if="isMulu" style="height: 100%;background-color: white;">
                    <!-- <a-icon type="close-circle" @click="colseFixed" class="close-icon"/> -->
                    <a-collapse>
                        <a-collapse-panel v-for="(item,index) in pageData.treeZj" :key="index" :header="item.fgjc">
                            <a-tree
                                v-if="item.zjList.length"
                                :treeData="item.zjList"
                                :autoExpandParent="true"
                                :defaultExpandAll="true"
                            >
                                <template slot="custom" slot-scope="item">
                                    <span @click="jobTk(item.id)">{{ item.title }}</span>
                                    <!-- <router-link :to="'#'+item.id">{{ item.title }}</router-link> -->
                                </template>
                            </a-tree>
                        </a-collapse-panel>
                    </a-collapse>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {viewZdwjByZdwjId,flfgviewInfo} from './service/index'
export default {
    components: {
    },
    props: {
        zdwjId: {
            type:String,
            default: '',
            require: false,
        }
    },
    data() {
        return {
            viewFileVisible: false,
            confirmLoading: false,
            pageData: {},
            isSearch: false,
            isMulu: false,
            sqsxid:'',
        }
    },
    mounted() {
    },
    methods: {
        getData(id,sqsxid){
            this.sqsxid = sqsxid
            if(sqsxid){
                flfgviewInfo({sqsxid:sqsxid}).then(res => {
                    //console.log(res)
                    this.pageData = res.result
                    res.result.treeZj.forEach((itema,indexa) => {
                        itema.zjList.forEach((itemb,indexb) => {
                            itemb = {
                                ...itemb,
                                scopedSlots: { title: 'custom' },
                            }
                            this.pageData.treeZj[indexa].zjList[indexb] = {...itemb}
                        })
                    })
                })
            }else{
                viewZdwjByZdwjId({fzdwjid:id}).then(res => {
                    //console.log(res)
                    this.pageData = res.result
                    res.result.treeZj.forEach((itema,indexa) => {
                        itema.zjList.forEach((itemb,indexb) => {
                            itemb = {
                                ...itemb,
                                scopedSlots: { title: 'custom' },
                            }
                            this.pageData.treeZj[indexa].zjList[indexb] = {...itemb}
                        })
                    })
                })
            }
            
        },
        handleOk(){},
        handleCancel(){
            this.viewFileVisible = false
        },
        // 搜索
        searchClick(){
            this.isSearch = true
            this.isMulu = false
        },
        // 目录
        muluClick(){
            this.isMulu = !this.isMulu
            // this.isSearch = false
        },
        //
        colseFixed(){
            this.isSearch = false
            this.isMulu = false
        },
        // 锚点跳转
        jobTk(val){
            // const tabsId = document.querySelector('#'+val);
            // querySelector不识别数字开头的命名，会报错。
            const tabsId = document.getElementById(val);
            this.$nextTick(()=>{
                document.getElementById(val).scrollIntoView({
                    top: tabsId.offsetTop + 200,
                    block: 'start',
                    behavior: "smooth"
                })
            })
            this.isMulu = false
        }
    },
    watch: {
        zdwjId(newval,oldVal){
            this.getData(newval)
        },
        deep: true
    },
}
</script>
<style lang="less">
.viewFile-div{
    .ant-modal{
        height: 100vh !important;
        overflow: hidden;
    }
}

</style>
<style>
    @import url('../css/newLaw.css');
</style>
